<template>
  <div class="player" :url="url">
    <video ref="videoElement" muted controls loop></video>
    <div class="error noBlueBg" v-if="error">
      视频播放失败！
    </div>
  </div>
</template>

<script>
import flvjs from "flv.js";

export default {
  name: "FlvPlayer",
  props: ["url", "cfg"], // 视频流路径，播放器高度，是否销毁播放器
  data() {
    return {
      flvPlayer: null,
      error: false,
      voidHeight: "",
    };
  },
  mounted() {
    // 判断是否传入高度，如果没有，高度100%
    this.height ? (this.voidHeight = this.height) : (this.voidHeight = "100%");
    // 页面加载完成后，初始化
    this.$nextTick(() => {
      if (this.url) {
        this.init(this.url);
      }
    });
  },
  methods: {
    // 初始化
    init(url) {
      this.error=false;
      console.log(url);
      if (flvjs.isSupported() && url) {
        this.flvPlayer = flvjs.createPlayer(
          {
            type: "flv",
            url: url,
          },
          {
            enableWorker: false, //不启用分离线程
            enableStashBuffer: false, //关闭IO隐藏缓冲区
            reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
            autoCleanupSourceBuffer: true, //自动清除缓存
            stashInitialSize: 128, // 减少首帧显示等待时长
            deferLoadAfterSourceOpen:false
          }
        );

        this.flvPlayer.attachMediaElement(this.$refs.videoElement);
        this.flvPlayer.load();

        // let controller = this.flvPlayer._transmuxer._controller;
        // controller._remuxer = {
        //   flushStashedSamples: function () {
        //     console.log("flushStashedSamples")
        //   }
        // };

        setTimeout(() => {
          this.flvPlayer.play && this.flvPlayer.play();
        }, 10 );


        // 加载完成
        this.flvPlayer.on(flvjs.Events.LOADING_COMPLETE, () => {
          this.error = false;
        });

        // 加载失败
        this.flvPlayer.on( flvjs.Events.ERROR,() => {
            this.error = true;
          },(error) => {
            console.log(error,'错误');
          }
        );
      } else {
        this.error = true;
      }
    },
    // 销毁
    destroy() {
      if(!this.flvPlayer) return false;
      this.flvPlayer.pause();
      this.flvPlayer.unload();
      this.flvPlayer.detachMediaElement();
      this.flvPlayer.destroy();
      this.flvPlayer = null;
    }
  },
  watch: {
    url() {
      this.imgError = false;
      // 切换流之前，判断之前的流是否销毁
      this.destroy();
      // 初始化
      this.init(this.url);
    },

  },
  beforeDestroy() {
    this.destroy();
  },
};
</script>

<style scoped lang="scss">
.player {
  position: relative;
  height: 100%;
  background-color: rgba(255,255,255,.85);

  video {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }

  .error {
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #999;
    font-weight: 600;
    font-size: 16px;
  }

}
</style>
